<link href="${rc.getContextPath()}/manage/css/dwzCustomCss/dwz.custom.css?v=${ver}" rel="stylesheet" type="text/css">
<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<style>
</style>
<#include "/common/pagerForm.html">
<form rel="pagerForm" class="required-validate" method="post" action="" onsubmit="return navTabSearch(this)">
    <div class="pageHeader">
        <div class="searchBar">
            <ul class="searchContent">
                <li class="notnormal"><label><@label key="personnelCode.C,colon">人员：</@label></label> 
                <input class="look required" id="personnelLookup.personnelCode" name="personnelCode" type="text" readonly="readonly" value="${condition.personnelCode!''}" />
                <a class="btnLook" href="${rc.getContextPath()}/manage/personnel/personnelLookUp?lookupType=multi" rel="personnelLookup_dialog" width="700" height="450" lookupGroup="personnelLookup" title="<@label key='queryPersonnel.D'>人员选择</@label>"></a></li>
                
                <li class="notnormal"><label><@label key="materialCode.C,colon">物料编号：</@label></label> 
                <input class="look required" id="materialLookup.materialCode" name="materialCode" type="text" postField="materialCode" suggestFields="materialCode,materialText" value="${condition.materialCode!''}"
                        suggestUrl="${rc.getContextPath()}/manage/material/componentSuggest" lookupGroup="materialLookup" remote="${rc.getContextPath()}/manage/material/validateMaterial" warn="<@label key='materialCodeNotExists.M'>物料编号不存在</@label>"/>
                        <a class="btnLook" href="${rc.getContextPath()}/manage/material/componentLookUp?lookupType=radio" rel="materialLookup_dialog" title="<@label key='select.C,materialCode.C'>选择物料</@label>" lookupGroup="materialLookup" ></a>
                </li>
            </ul>
            <ul class="searchContent">
                <li class="notnormal"><label><@label key="date.C,colon">日期：</@label></label> 
                <input type="text" name="minTheDate" value="${condition.minTheDate!''}" 
                           max_date="{maxTheDate}" class="date required"  dateFmt="yyyy-MM-dd"/>
                    <a class="inputDateButton" href="javascript:;">选择</a>
                </li>
                
                <li class="notnormal"><label><@label key="EndtTime.C,colon">到：</@label></label> 
                <input type="text" name="maxTheDate" value="${condition.maxTheDate!''}" 
                        min_date="{minTheDate}" class="date required"  dateFmt="yyyy-MM-dd"/>
                    <a class="inputDateButton" href="javascript:;">选择</a></li>
                
                <li class="query">
                    <div class="buttonActive">
                        <div class="buttonContent">
                            <button type="submit"><@label key="query.B">查询</@label></button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</form>
    <div class="panelBar">
        <ul class="toolBar">
            <li style="margin-top: 8px;"><h1 style="text-align:left;"><@label key="graph.D">图表</@label></h1></li>
        </ul>
    </div>
<div class="pageContent" style="overflow: auto;" layoutH="20">
    <div class="unitBox" id="chartHolder" style="float: left; display: block; overflow: hidden; width: 100%; height:400px;background: #fff">
        
    </div>
    
    <div class="unitBox" style="float: left; display: block; overflow-x: auto; width:100%;background: #fff;" layoutH="300">
    <table class="table border" width="120%" layoutH="415">
        <thead>
            <tr>
                <th width="50" orderField="theDate"<#if (page.orderField?? && page.orderField == 'theDate')>class="${page.orderDirection!''}"</#if>><@label key="date.C">日期</@label></th>
                <th width="60" orderField="personnelName"<#if (page.orderField?? && page.orderField == 'personnelName')>class="${page.orderDirection!''}"</#if>><@label key="personnelName.C">姓名</@label></th>
                <th width="30" orderField="quantity"<#if (page.orderField?? && page.orderField == 'quantity')>class="${page.orderDirection!''}"</#if>><@label key="output.C">产量</@label></th>
                <th width="50" orderField="workHours"<#if (page.orderField?? && page.orderField == 'workHours')>class="${page.orderDirection!''}"</#if>><@label key="workHours.C">工时</@label></th>
                <th width="50"><@label key="inOutRatio.C">投入产出比</@label></th>
                <th width="50" orderField="personnelCode"<#if (page.orderField?? && page.orderField == 'personnelCode')>class="${page.orderDirection!''}"</#if>><@label key="personnelCode.C">人员编号</@label></th>
                <th width="80" orderField="workcenterText"<#if (page.orderField?? && page.orderField == 'workcenterText')>class="${page.orderDirection!''}"</#if>><@label key="workCenter.C">工作中心</@label></th>
                <th width="50" orderField="materialCode"<#if (page.orderField?? && page.orderField == 'materialCode')>class="${page.orderDirection!''}"</#if>><@label key="materialCode.C">物料编号</@label></th>
                <th width="100" orderField="materialText"<#if (page.orderField?? && page.orderField == 'materialText')>class="${page.orderDirection!''}"</#if>><@label key="materialText.C">物料描述</@label></th>
            </tr>
        </thead>
        <tbody>
            <#if page??><#if page.data??><#if (page.data?size>0)> <#list page.data as performance>
            <tr target="performance" rel="${performance.id!''}">
                <td>${performance.theDate?string("yyyy-MM-dd")!''}</td>
                <td>${performance.personnelName!''}</td>
                <td>${performance.quantity!''}</td>
                <td>${performance.workHours!''}</td>
                <td>${(performance.workHours/performance.quantity)?string("#.####")}</td>
                <td>${performance.personnelCode!''}</td>
                <td>${performance.workcenterText!''}</td>
                <td>${performance.materialCode!''}</td>
                <td>${performance.materialText!''}</td>
            </tr>
            </#list> <#else>
            <tr target="performance_id">
                <td colspan="2" class="noData">======<@label key="noListData.C">列表无数据</@label>=====</td>
            </tr>
            </#if></#if> <#else>
            <tr target="performance_id">
                <td colspan="2" class="noData">======<@label key="noListData.C">列表无数据</@label>=====</td>
            </tr>
            </#if>
        </tbody>
    </table>
</div>
<script>
$(function(){
    var $navTab=navTab.getCurrentPanel();
    var formData=$("form",$navTab).serializeArray();
    option = {
        title: {
            text: '<@label key="inOutRatio.C">个人投入产出比</@label>',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            orient : 'horizontal',
            x: 'center',
            y: 'bottom',
            padding: 5,
            data:[]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{name:'',type:'line',data:[]}],
        noDataLoadingOption:{
            text :"<@label key='noData.C'>暂无数据</@label>",
            effect : 'whirling',
            effectOption:{
                   backgroundColor:"#fff",
            }
        }
    };
    require.config({
         paths : {
            echarts : '${rc.getContextPath()}/manage/js/echarts'
        }
       });
       require(
           [
               'echarts',  // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
               'echarts/chart/line'
           ],
           function (ec) {
              var myChart = ec.init($('#chartHolder',navTab.getCurrentPanel())[0]);
              $.DWZajax({
                url:"${rc.getContextPath()}/manage/hr_personnelPerformance/getPersonnelStatistics?",
                data:formData,
                callback:function (data)
                {
                    option.xAxis.data = data.dateList;
                    option.legend.data = data.nameList;
                    if(data.dataList && data.dataList.length>0){
                        option.series = [];
                        for(var i=0;i<data.dataList.length;i++){
                            option.series.push({name:data.nameList[i],type:"line",data:data.dataList[i]});
                        }
                    }    
                      myChart.setOption(option, true);
                }
            });
           }
    );
});
</script>